<template>
    <div id="cuoti">
        <div v-if="chenload">
			<div class="art">
				<div v-if="subject==3||subject=='3'" class="artlist">科目练习</div>
				<ul class="list" v-if="subject==3||subject=='3'">
				  <li v-for="(item,index) in ChaptersItems" :key="index" @click="charperclick('',item.id)">
					<div class="list-left" v-if="item.subject==3||item.subject=='3'">
						<span class="listcharper">{{item.name}}</span>
						<div class="listtext">
						  <span>{{item.num}}题</span>
						  <img class="sizea" src="../../../assets/image/leftpush.png"/>
						</div>
					</div>
				  </li>
				</ul>
				<div v-if="subject==3||subject=='3'" class="artlist">章节练习</div>
				<ul class="list">
				  <li v-for="(item,index) in ChaptersItems" :key="index" @click="tap(item,index)">
					<div class="list-left" v-if="item.subject!=3||item.subject!='3'">
						<span class="listcharper">{{item.name}}</span>
						<div class="listtext">
						  <span>{{item.units}}节</span>
						  <img class="sizea" src="../../../assets/image/leftpush.png"/>
						</div>
					</div>
					<!-- <ul v-show='item.isShow'> -->
					<ul v-show='item.isShow&&(item.subject!=3||item.subject!="3")'>
						<li v-for="(child,index) in Unitsitem"  :key="index" @click="charperclick(child.id,item.id)">
							<div class="list-left list-padd">
								<span class="listcharper">{{child.name}}</span>
								<div class="listtext">
								  <span>{{child.num}}题</span>
								  <img class="sizea" src="../../../assets/image/leftpush.png"/>
								</div>
							</div>
						</li>
					</ul>
				  </li>
				</ul>
			</div>
			
			<!-- 登录弹窗 -->
			<div class="shoewr-chenhoupass">
				<div class="chen-contener chenpass">
					<p class="chen-title">提示</p>
					<p class="chen-text chen-textactive">您需要先登录?</p>
					<div class="chen-but">
						<p class="chen-but-no" @click="repeatclose()">取消</p>
						<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
					</div>
				</div>
			</div>
		</div>
		<div class="loadmore" v-else>
		  <img src="static/img/load.gif" alt="">
		</div>
    </div>
</template>
<script>
export default {
	name:'chapers',
    data() {
		return {	
			chenload:false,
			ChaptersItems:[],  //所有章
			Unitsitem:[],
			share:0,  //0分享  1不是分享
			subject:'',   //科目
		};
	},
	methods:{
        back(){
           this.$router.go(-1)
        },
		 // 点击有小节的跳转
		charperclick(unitID,chapterID){
			var that = this;
			var query = {
				chapterID:chapterID,
				unitID:unitID,
				type:0,
				subject:that.subject
			}
			that.clickevery(query);
		},
		// 判断是否登录
		clickevery(query){
			var that = this;
			if(localStorage.getItem('token')){
				that.$router.push({
					path:'/questiontype',
					query:query
				})
			}else{
				$('.shoewr-chenhoupass').fadeIn();
			}
		},
		 // 获取科目下的章
		getChapters(){
			var that = this;
			var url = this.$store.state.url+'Chapter/getChapters';
			var data ={
			 	subject:that.subject
			}
			that.request.wxRequest('GET',url,data,function(res){
			 	if (res.data.errcode == 0 || res.data.errcode == '0') {
			 	  // console.log(res);
			 	  var data = res.data.data;
			 	  that.ChaptersItems = data;
				  // console.log(that.ChaptersItems)
				  for(var i=0;i<data.length;i++){
					that.ChaptersItems[i]["isShow"]=false;
				  }
				  that.chenload=true
			 	}else{
					
				}
			})
		},
		 // 根据章ID获取小节
		getUnits(id){
			var that = this;
			var url = this.$store.state.url+'Chapter/getUnits';
			var data ={
			 	subject:that.subject,
				chapterID:id
			}
			that.request.wxRequest('GET',url,data,function(res){
			 	if (res.data.errcode == 0 || res.data.errcode == '0') {
			 	  // console.log(res);
			 	  var data = res.data.data;
			 	  that.Unitsitem = data;
				  // console.log(that.Unitsitem)
			 	}
			})
		},
        tap(item,index){
            // this.id=index;
            var that=this;
			// console.log(index);
			that.getUnits(item.id);
			this.ChaptersItems.forEach(i=>{
			  if(i.isShow!=this.ChaptersItems[index].isShow){
				   i.isShow=false;    
			  }      
			});
			that.ChaptersItems[index].isShow=!that.ChaptersItems[index].isShow;
        },
    },
	mounted() {
		var that = this;
		that.subject=that.$route.query.subject;
		that.share=that.$route.query.share;   //0不是分享   1分享
		that.getChapters();
	}
}
</script>
<style scoped>
.artlist{
	width: 6.9rem;
	line-height: .94rem;
	margin: auto;
	color: #333333;
	font-size: .34rem;
	border-bottom: 1px solid #ededed;
	font-weight: 600;
}
.list>li{
    margin:0 .2rem;
    text-align: center;
    font-size: .3rem;
}
.list>li>div{
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    border-bottom:0.01rem solid #EDEDED
}
.list>li>ul{
	border-radius:0.08rem;
}
.list>li>ul>li{
    /* padding: .25rem 0; */
	line-height: .84rem;
    background: #F7F9FB;
    border-bottom: 1px solid #EDEDED;
    text-align: center;
}
.list-left{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.listcharper{
	display: inline-block;
	font-size: .3rem;
	color: #333;
	width: 80%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}
.listtext{
	display: flex;
	justify-content: flex-start;
}
.list-padd{
	padding: 0 .3rem !important;
}
.sizea{
    width: 0.1rem;
    height: 0.2rem;
    display: block;
	margin-top: .35rem;
	margin-left: .12rem;
}
</style>
